<!-- 授权操作弹框 -->
<template>
  <el-dialog
    custom-class="custom_dialog_box"
    v-loading="true"
    :title="(enterType === 'add' ? '新增' : '修改') + '授权'"
    :visible.sync="visible"
    width="780px"
    append-to-body
    destroy-on-close
    @close="dialogColse"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="90px"
      v-loading="submitLoading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入公司名称"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="授权类型" prop="authorizeType">
            <el-select
              v-model="formData.authorizeType"
              placeholder="请选择授权类型"
            >
              <el-option
                v-for="item in authorizeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactPerson">
            <el-input
              v-model="formData.contactPerson"
              placeholder="请输入联系人"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="formData.phone"
              placeholder="请输入手机号码"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="详细地址" prop="address">
        <el-input
          v-model="formData.address"
          placeholder="请输入详细地址"
          maxlength="100"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="submitLoading">
        保 存
      </el-button>
      <el-button @click="dialogColse">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { authorizeSave, authorizeUpdate } from "@/api/useMenu/accredit";
export default {
  name: "AccreditHandleDialog",
  data() {
    return {
      visible: false, // 弹框状态
      // 表单数据
      formData: {},
      // 校验
      rules: {
        name: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: ["blur", "change"],
          },
        ],
        authorizeType: [
          {
            required: true,
            message: "请选择授权类型",
            trigger: ["blur", "change"],
          },
        ],
        // contactPerson: [
        //   {
        //     required: true,
        //     message: "请输入联系人",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        phone: [
          // {
          //   required: true,
          //   message: "请输入手机号码",
          //   trigger: ["blur", "change"],
          // },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        // address: [
        //   {
        //     required: true,
        //     message: "请输入详细地址",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
      // 授权下拉选择
      authorizeTypeList: [
        { value: 0, label: "工厂" },
        { value: 1, label: "门店" },
      ],

      submitLoading: false, //保存按钮加载
      enterType: "", // 进入类型 add / edit
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 打开弹框
    openDialog(enterType = "add", row = {}) {
      this.visible = true;
      this.submitLoading = true;
      this.enterType = enterType;
      if (enterType === "edit") {
        this.formData = { ...row };
      }
      this.submitLoading = false;
    },
    //  提交按钮
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          let { enterType, formData } = this;
          let request = enterType === "add" ? authorizeSave : authorizeUpdate;
          let { code, msg } = await request(formData);
          if (code === 200) {
            let msg = enterType === "add" ? "新增成功" : "修改成功";
            this.$modal.msgSuccess(msg);
            this.visible = false;
            this.$emit("updateTable");
          } else {
            this.$modal.msgError(msg || "接口异常");
          }
          this.submitLoading = false;
        }
      });
    },
    // Dialog 关闭的回调
    dialogColse() {
      this.visible = false;
      this.formData = {};
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .custom_dialog_box {
  .el-dialog__body {
    max-height: 680px;
    overflow: auto;
  }
  .el-select {
    width: 100%;
  }
}
</style>
